<template>
  <el-card shadow="never" :body-style="{ padding: '16px 16px' }" class="cus-card">
    <div class="actions">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="$router.push({ name: 'goodsCreate' })">
        发布商品
      </el-button>
    </div>
    <div class="filter-wrap">
      <el-form
        :inline="true"
        :model="form"
        size="small"
        class="form-goods-filter">
        <el-form-item label="商品名称">
          <el-input v-model="form.name" placeholder="输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="form.cate" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabel-wrap">
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          fixed
          type="selection"
          width="50">
        </el-table-column>
        <el-table-column
          fixed
          prop="title"
          label="商品名"
          width="228">
          <template slot-scope="scope">
            <div class="good-title-wrap">
              <div class="good-img">
                <img :src="scope.row.cover_image_url" alt="">
              </div>
              <div class="good-title">
                <div class="title">
                  {{ scope.row.title }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格(元)"
          width="180">
        </el-table-column>
        <el-table-column
          prop="total_stock"
          label="库存">
        </el-table-column>
        <el-table-column
          label="销量">
          <template>
            -
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="商品状态">
          <template>
            <span>销售中</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="price"
          label="创建时间">
          <template slot-scope="scope">
            <div style="width: 90px">{{ scope.row.created_at }}</div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <div class="table-operations-container">
              <div class="operations">
                <div class="operations-item">
                  <a :href="`/goods/${scope.row.id}/edit`" target="_blank" rel="noopener noreferrer">编辑</a>
                </div>
                <div class="operations-item">
                  <a href="/">复制</a>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table-pagination-wrapper">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[10, 15, 50, 100]"
        :page-size="form.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { getProductList } from '@/api/product'

export default {
  data() {
    return {
      form: {
        page: 1,
        limit: 15,
        name: null,
        cate: null
      },
      loading: false,
      total: 0,
      list: []
    }
  },
  created () {
    this.getProductList()
  },
  methods: {
    getProductList () {
      getProductList(this.form).then(res => {
        if (res.status === 'success') {
          this.list = res.data
          this.total = res.meta.total
        }
      })
    },
    handleSizeChange(val) {
      this.form.page = 1
      this.form.limit = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.getProductList()
    }
  }
}
</script>

<style lang="scss">
.form-goods-filter {
  .el-form-item {
    margin-right: 30px;
  }
}
</style>

<style lang="scss" scoped>
.actions {
  margin: 14px 0;
}
.filter-wrap {
  margin-bottom: 16px;
  padding: 24px 24px 6px 24px;
  background: #f2f3f5;
}
.good-title-wrap {
  display: flex;
  align-items: center;
  .good-title {
    flex: 1;
    margin-left: 10px;
    line-height: 18px;
    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      position: relative;
      -webkit-box-orient: vertical;
    }
  }
}
.good-img {
  width: 60px;
  height: 60px;
  background-color: #eee;
  &>img {
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }
}
</style>